<template>
  <div class="main">
    <div class="bigHeader">
      <img class="bigHeaderContentImg" src="../../assets/bigSreen/top.png" alt="">
       <div class="bigHeaderLeft">
         <div class="bigHeaderLeftContent1">

         </div>
         <div class="bigHeaderLeftContent1Time">
           <span style="font-size: 15px;color: #FFFFFF;">{{ date  }} {{ week }}</span>
           <span style="font-size: 22px;color: #66FFFF;margin-left: 15px">{{ time }}</span>
         </div>
       </div>
       <div class="bigHeaderContent">

        <div style="margin-top: -20px">
          <span class="bigHeaderContentSpan">信丰伟业移动终端全球可视化系统</span>
        </div>
       </div>
       <div class="bigHeaderRight">
         <div class="bigHeaderLeftContent1">

         </div>
         <div class="bigHeaderLeftContent1Time" style="justify-content: left">
           <span style="font-size: 15px;color: #FFFFFF;">天气</span>
           <span style="font-size: 22px;color: #66FFFF;margin-left: 15px">晴</span>
         </div>
       </div>
    </div>
    <div class="bigContent">
      <div class="bigContentLeft">
        <div class="bigContentLeftContent1">
          <img class="bigContentLeftImg" src="../../assets/bigSreen/contentLeft.png" alt="">
          <div class="bigContentLeftContent1Title">
            <div class="bigContentLeftContent1TitleHeader">
              <div class="flexDiv">
                <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
                <span style="margin-left: 8px">今日在线：</span>
                <span class="bigContentLeftContent1TitleNumber">{{toDayCheckTotal}}</span>
              </div>
              <div>
                <span>单位：台</span>
              </div>
            </div>
          </div>
          <div id="globaltoDayCheck">
          </div>
        </div>

          <div class="left1 bigContentLeftContent2">
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">最近日活/月活</span>
            </div>
            <div class="left1Content">
             <div class="left1ContentDay">
               <div class="left1ContentDayDiv1" style="height: 24px">
                 <span class="left1ContentDaySpan1">
                    {{offLineData.latestDayCount}}台
                 </span>
               </div>
               <div class="left1ContentDayDiv1" style="margin-top: 4px;height: 14px">
                 <span class="left1ContentDaySpan1" style="font-size: 14px">最近日活</span>
               </div>
               <div class="left1ContentDayDiv2">
                 <div class="left1ContentDayDiv2Content">
                   <p>{{offLineData.dayOfYearHighestCount}}台</p>
                   <p class="marginR5">本年最高日活</p>
                 </div>
                 <div class="fenge">

                 </div>
                 <div class="left1ContentDayDiv2Content">
                   <p>{{offLineData.hisDayHighestCount}}台</p>
                   <p class="marginL5">历史最高日活</p>
                 </div>
               </div>
             </div>
              <div class="left1ContentMonth">
                <div class="left1ContentDayDiv1" style="height: 24px">
                 <span class="left1ContentDaySpan1" style="color: #00FFF5;">
                   {{offLineData.latestMonthCount}}台
                 </span>
                </div>
                <div class="left1ContentDayDiv1" style="margin-top: 4px;height: 14px">
                  <span class="left1ContentDaySpan1" style="font-size: 14px;color: #00FFF5">最近月活</span>
                </div>
                <div class="left1ContentDayDiv2">
                  <div class="left1ContentDayDiv2Content">
                    <p> {{offLineData.monthHighestCount}}台</p>
                    <p class="marginR5">本年最高月活</p>
                  </div>
                  <div class="fenge">

                  </div>
                  <div class="left1ContentDayDiv2Content">
                    <p>{{offLineData.hisMonthHighestCount}}台</p>
                    <p class="marginL5">历史最高月活</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="left2 bigContentLeftContent2">
            <div class="bigContentLeftContent1Title">
              <div class="bigContentLeftContent1TitleHeader">
                <div class="flexDiv">
                  <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
                  <span style="margin-left: 8px">年度活跃度统计</span>
                </div>
                <div>
                  <span>单位：台</span>
                </div>
              </div>
            </div>
             <div id="globalmonthMax" style="height: 175px"></div>
          </div>
          <div class="left3 bigContentLeftContent2" >
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">活跃度区域排名TOP5</span>
            </div>
             <div id="globalmonthMaxCountries" style="height: 175px"></div>
          </div>
      </div>
      <div class="bigContentCenter">
        <div class="bigContentCenterHeader">
          <img src="../../assets/bigSreen/centerHeader.png" alt="" class="bigContentCenterHeaderImg">
          <img src="../../assets/bigSreen/loading.png" alt="" class="bigContentCenterHeaderImgLoading" >
          <div class="bigContentCenterHeaderCount">
           <div class="bigContentCenterHeaderCountLeft">
             <img src="../../assets/bigSreen/centerHeaderLeft.png" alt="" width="100%" height="40px">
             <span class="bigContentCenterHeaderCountSpan" style="left: 218px">设备总数</span>
             <div style="margin-top: 0px" class="bigContentCenterHeaderCountBottom">
               <div v-for="(item,index) in totalCount" :key="index" class="bigContentCenterHeaderCountBottomItem">
                 {{item}}
               </div>
             </div>
           </div>
            <div class="bigContentCenterHeaderCountRight">
              <img src="../../assets/bigSreen/centerHeaderRight.png" alt="" width="100%" height="40px">
              <span class="bigContentCenterHeaderCountSpan" style="left: 104px">实时在线设备总数</span>
              <div style="margin-top: 0px" class="bigContentCenterHeaderCountBottom">
                <div v-for="(item,index) in onlineCount" :key="index" class="bigContentCenterHeaderCountBottomItem" style="color: #00FFF4 ">
                  {{item}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bigContentCenterContent">
          <img src="../../assets/bigSreen/centerContent.png" alt="" class="bigContentCenterContentImg">
<!--          <div class="bigContentLeftContent1Title" style="margin: 0 !important;top: 20px;left: 13px">-->
<!--            <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">-->
<!--            <span style="margin-left: 8px">实时展示</span>-->
<!--          </div>-->
          <div id="mapGlobal"></div>
        </div>
      </div>
      <div class="bigContentRight">
        <div class="bigContentLeftContent1">
          <img class="bigContentLeftImg" src="../../assets/bigSreen/contentLeft.png" alt="">
          <div class="bigContentLeftContent1Title">
            <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
            <span style="margin-left: 8px">今日激活：</span>
            <span class="bigContentLeftContent1TitleNumber">{{activatedCount.todayCount}}台</span>
          </div>
          <div class="bigContentLeftContent1Main">
            <div class="bigContentLeftContent1MainItem">
              <span class="bigContentLeftContent1MainSpan">昨日激活</span><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('yesterdayCount')" status="success" :format="format"></el-progress>
            </div>
            <div class="bigContentLeftContent1MainItem">
              <span class="bigContentLeftContent1MainSpan">本月单日最高激活</span><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('monthCount')" :format="format2"></el-progress>
            </div>
            <div class="bigContentLeftContent1MainItem">
              <span class="bigContentLeftContent1MainSpan">年度单日最高激活</span><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('yearHistoryCount')" status="exception" :format="format4"></el-progress>
            </div>
            <div class="bigContentLeftContent1MainItem">
              <span class="bigContentLeftContent1MainSpan">历史单日最高激活</span><el-progress style="width: 62%" :text-inside="true" :stroke-width="20" :percentage="mathPricent('historyCount')" status="warning" :format="format3"></el-progress>
            </div>
          </div>
        </div>
        <div class="bigContentLeftContent2">
          <div>
            <div class="bigContentLeftContent1Title">
              <div class="bigContentLeftContent1TitleHeader">
                <div class="flexDiv">
                  <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
                  <span style="margin-left: 8px">激活量年度统计</span>
                </div>
                <div>
                  <span>单位：台</span>
                </div>
              </div>
            </div>
          </div>
          <div id="globalmonthNewCount">
          </div>
        </div>
        <div class="bigContentLeftContent2">
          <div>
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">设备区域排名TOP5</span>
            </div>
          </div>
          <div class="facilityCountryRatio">
            <div v-for="item in facilityCountryRatioList">
              <div>
                <img :src="item.img" alt="" class="facilityCountryRatioImg">
              </div>
              <div class="facilityCountryRatioContent">
                <p>{{item.country}}</p>
                <p style="font-size: 10px;margin-top: 5px">{{item.ratio}}%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="bigContentLeftContent2">
          <div>
            <div class="bigContentLeftContent1Title">
              <img src="../../assets/bigSreen/greenIcon.png" alt="" class="iocn">
              <span style="margin-left: 8px">设备型号排名TOP5</span>
            </div>
          </div>
          <div id="globalfacilityTypeRatio">
          </div>
        </div>
      </div>
      <div class="version">
        <span>MTVS_V1.0.0.20220510</span>
      </div>
    </div>

  </div>
</template>
  <script>
  import * as echarts from 'echarts'
  import {
    getTodayOnlineTrend,
    getOffLineData, getTop5Country, getTotalCount,
    getMonthNewCount, getFacilityCountryRatio, getFacilityTypeRatio, getActivatedCount, equipmentMap
  } from './api'
  import ratio1 from '../../assets/bigSreen/ratio1.png'
  import ratio2 from '../../assets/bigSreen/ratio2.png'
  import ratio3 from '../../assets/bigSreen/ratio3.png'
  import ratio4 from '../../assets/bigSreen/ratio4.png'
  import ratio5 from '../../assets/bigSreen/ratio5.png'
  import "echarts/map/js/china.js"; // 引入中国地图数据
  import 'echarts/map/js/world.js'
  import 'echarts-gl'
  import img from '../../assets/bigSreen/8.png'
  import img8 from '../../../public/img/8.png'
  export default {
    data(){
      let option ,myChart;
      const  initMap = (data,once=false)=> {
        var config = {
          color: '#750be8',
          levels: 1,
          intensity: 4,
          threshold: 0.01
        }
        let geoCoordMap = data.allCityPoint || {}
        var canvas = document.createElement('canvas');
        canvas.width = 2048;
        canvas.height = 1024;
        let context = canvas.getContext("2d");

        context.lineWidth = 0.5;
        context.strokeStyle = config.color;
        context.fillStyle = config.color;
        context.shadowColor = config.color;
        let convertData = function (data) {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let dataItem = data[i];
            let fromCoord = geoCoordMap[dataItem.startName];
            let toCoord = geoCoordMap[dataItem.endName];
            if (fromCoord && toCoord) {
              res.push({
                fromName: dataItem.startName,
                toName: dataItem.endName,
                coords: [fromCoord, toCoord],
                value:(Math.random() * 3000).toFixed(2)
              });
            }
          }
          return res;
        };
        let positionData = function (data) {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let dataItem = data[i];
            let toCoord = geoCoordMap[dataItem.endName];
            if ( toCoord) {
              res.push([...toCoord,0,dataItem.value,dataItem.endName]);
            }
          }
          return res;
        };
        if(once){
          image(img).then(function(image) {
            var m = image.height,
              n = image.width,
              values = new Array(n * m),
              contours = d3.contours().size([n, m]).smooth(true),
              projection = d3.geoIdentity().scale(canvas.width / n),
              path = d3.geoPath(projection, context);

            //   StackBlur.R(image, 5);

            for (var j = 0, k = 0; j < m; ++j) {
              for (var i = 0; i < n; ++i, ++k) {
                values[k] = image.data[(k << 2)] / 255;
              }
            }

            var opt = {
              image: canvas
            }

            var results = [];
            function update(threshold, levels) {
              context.clearRect(0, 0, canvas.width, canvas.height);
              var thresholds = [];
              for (var i = 0; i < levels; i++) {
                thresholds.push((threshold + 1 / levels * i) % 1);
              }
              results = contours.thresholds(thresholds)(values);
              redraw();
            }

            function redraw() {
              results.forEach(function (d, idx) {
                context.beginPath();
                path(d);
                context.globalAlpha = 1;
                context.stroke();
                if (idx > config.levels / 5 * 3) {
                  context.globalAlpha = 0.01;
                  context.fill();
                }
              });
              opt.onupdate();
            }

            initCharts(opt);
            d3.timer(function(t) {
              var threshold = (t % 10000) / 10000;
              update(threshold, 1);
            });
            update(config.threshold, config.levels);

          });
        }else {
          updataechrts()
        }
        function image(url) {
          return new Promise(function(resolve) {
            var image = new Image();
            image.src = url;
            image.onload = function() {
              var canvas = document.createElement("canvas");
              canvas.width = image.width / 8;
              canvas.height = image.height / 8;
              var context = canvas.getContext("2d");
              context.drawImage(image, 0, 0, canvas.width, canvas.height);
              resolve(context.getImageData(0, 0, canvas.width, canvas.height));
            };
          });
        }
        function initCharts(opt) {
          // if(!once){
          //   echarts.init(document.getElementById('map')).clear();//销毁前一个实例
          //   // echarts.init(document.getElementById('canvas')).clear();//销毁前一个实例
          // }
          if(document.getElementById('mapGlobal')){
            echarts.init(document.getElementById('mapGlobal')).dispose()
          }
          myChart = echarts.init(document.getElementById('mapGlobal'))
          let canvas2 = document.createElement('canvas');
          let mapChart = echarts.init(canvas2, null, {
            width: 2048,
            height: 1024
          });


          // var contourChart = echarts.init(document.createElement('canvas'), null, {
          //   width: 2048,
          //   height: 1024
          // });

          var img = new echarts.graphic.Image({
            style: {
              image: opt.image,
              x: -1,
              y: -1,
              width: opt.image.width + 2,
              height: opt.image.height + 2
            }
          });
          // contourChart.getZr().add(img);
          opt.onupdate = function () {
            img.dirty();
          };
          mapChart.setOption({
            series: [{
              type: 'map',
              map: 'world',
              // 绘制完整尺寸的 echarts 实例
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              boundingCoords: [
                [-180, 90],
                [180, -90]
              ]
            }]
          });
          var canvas1 = document.createElement('canvas');
          var mapChart1 = echarts.init(canvas1, null, {
            width: 2048,
            height: 1024
          });
          mapChart1.setOption({
            backgroundColor: 'transparent',
            series: [{
              type: 'map',
              map: 'china',
              left: 0,
              top: 0,
              right: 0,
              bottom: 0,
              //   environment: '#000',
              boundingCoords: [
                [-180, 90],
                [180, -90]
              ],
              label: {
                normal: {
                  show: false,
                  fontSize: 4,
                  lineHeigh: 4,
                  color: '#000',

                }
              },
              itemStyle: {
                normal: {
                  areaColor: 'transparent',
                  borderWidth: 1,

                  borderType: 'solid',
                  borderColor: '#a85000'
                }
              },

            }]
          });

          option = {
            title: {
//			        text: '点击地球获取该区域地图',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              show: true
            },
            //		    visualMap: [{
            //		        // show: false,
            //		        type: 'continuous',
            //		        seriesIndex: 0,
            //		        text: ['scatter3D'],
            //		        textStyle: {
            //		            color: '#fff'
            //		        },
            //		        calculable: true,
            //		        max: 3000,
            //		        inRange: {
            //		            color: ['#87aa66', '#eba438', '#d94d4c']
            //		        }
            //		    }],
            globe: {
              //		        baseTexture: mapChart,
              //			    environment:'none',//背景
              //environment:require('../../assets/bigSreen/charity_top.png'),
              heightTexture: require('../../assets/bigSreen/bathymetry_bw_composite_4k-back.jpg'),
              baseTexture: img8,
              shading: 'lambert',
              light: { // 光照阴影
                main: {
                  color: 'blue', // 光照颜色
                  intensity: 14.2, // 光照强度
                  shadowQuality: 'ultra', //阴影亮度
                  shadow: true, // 是否显示阴影
                  alpha: 40,
                  beta: -30
                },
                ambient: {
                  intensity: 4.6
                }
              },
              viewControl: {
                alpha: 30,
                beta: 160,
//			            targetCoord: [116.46, 39.92],
                autoRotate: true,
                autoRotateAfterStill: 10,
                distance: 180,
                autoRotateSpeed:4
              },
              postEffect: {//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
                enable: true, //是否开启
                SSAO: {//环境光遮蔽
                  radius: 1,//环境光遮蔽的采样半径。半径越大效果越自然
                  intensity: 1,//环境光遮蔽的强度
                  enable: true
                }
              },

              // layers: [{
              //   type: 'blend',
              //   blendTo: 'emission',
              //   texture: contourChart,
              //   intensity: config.intensity
              // }]
            },
            series: [{
              name: 'lines3D',
              type: 'lines3D',
              coordinateSystem: 'globe',
              effect: {
                show: true,
                period: 2,
                trailWidth: 3,
                trailLength: 0.5,
                trailOpacity: 1,
                trailColor: '#19BDA2'
              },
              blendMode: 'lighter',
              lineStyle: {
                width: 1,
                color: '#19BDA2',
                opacity: 0.2
              },
              data: [],
              silent: false
            },
              { //点
                name: '景区',
                type: 'scatter3D',
                blendMode: 'lighter',
                coordinateSystem: 'globe',
                showEffectOn: 'render',
                zlevel: 2,
                effectType:"ripple",
                symbolSize: function (val,key) {
                  console.log('val', val)
                  if(val.length>3){
                    if(val[4] === '深圳'){
                      return 25
                    }else if(val[2]<=10000){
                      return 10
                    }else if(val[2]<=100000 && val[2]>10000){
                      return 12
                    }else if(val[2]<=200000 && val[2]>100000){
                      return 14
                    }else if(val[2]<=500000 && val[2]>200000){
                      return 16
                    }else if(val[2]<=1000000 && val[2]>500000){
                      return 18
                    }else if(val[2]>1000000){
                      return 20
                    }
                  }else {
                    return 1;
                  }
                },
                rippleEffect: {
                  period: 4,
                  scale: 4,
                  brushType: 'fill'
                },

                //		        showEffectOn: 'hover',
                hoverAnimation: true,
                label: {
                  normal: {
                    show: true,
                    position: 'right',
//			                formatter: '{b}',
                    formatter:function(params){
                      let itemData = params.data
                      if(itemData.length>4){
                        return itemData[4]
                      }else {
                        return '南京'
                      }
                    },
                    textStyle: {
                      fontSize: 18,
                      color: '#EBFA29',
                      fontWeight:'bold',
//			                    backgroundColor:'rgba(255,255,255,0.2)'
                      backgroundColor:'transparent'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: function (e){
                      if(e.data[4] === '深圳'){
                        return '#00FF00'
                      }else {
                        return '#EBFA29'
                      }
                    }
                  }
                },
                //		        data: [{
                //		            'name': 'A',
                //		            'value': [105.18, 37.51, 1500]
                //		        }, {
                //		            'name': 'B',
                //		            'value': [118.393252, 31.15576, 1500]
                //		        }, {
                //		            'name': 'C',
                //		            'value': [117.989662, 31.293115, 1500]
                //		        }]
                data:positionData(data.spread||[])
              }]
          }
          // 随机数据
          option.series[0].data = convertData(data.spread||[])
          myChart.setOption(option)
        }
        function updataechrts (){
          // myChart.dispose()
          option.series[0].data = convertData(data.spread)
          option.series[1].data = positionData(data.spread)
          myChart.setOption(option)
        }
      }
      const clearMap = ()=>{
        if(myChart){
          myChart.dispose()
        }
      }
      return{
        totalCount:'',//设备总数
        onlineCount:'',//设备在线总数
        offLineData:{},//在线量非实时区域数据
        facilityCountryRatioList:[],//设备分布
        ratioList:[ratio1,ratio2,ratio3,ratio4,ratio5],
        img,
        //激活数检测
        activatedCount:{
          "todayCount": 420,
          "yesterdayCount": 650,
          "monthCount": 180000,
          "historyCount": 1020
        },
        img8,
        toDayCheckTotal:0,//今日在线检测总量
        date:'',
        time:'',
        week:'',
        timer:null,
        timer2:null,
        initMap,
        clearMap
      }
    },
    created() {
      setInterval(()=>{
        this.time =  this.getDate('hh:mm:ss')
      })
      this.week = this.getWeekDay()
      this.date = this.getDate('yyyy-MM-dd')
    },
    mounted() {
      this.init();
    },
    methods:{
       getWeekDay(){
        let now = new Date()
        let day = now.getDay();
        let weeks = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六')
        let week = weeks[day]
        return week
      },
       getDate(fmt){
         let date = new Date()
         var o = {
           "M+": date.getMonth() + 1, // 月份
           "d+": date.getDate(), // 日
           "h+": date.getHours(), // 小时
           "m+": date.getMinutes(), // 分
           "s+": date.getSeconds(), // 秒
           "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
           "S": date.getMilliseconds() // 毫秒
         };
         if (/(y+)/.test(fmt))
           fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
         for (var k in o)
           if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
         return fmt;
       },
       init(){
         this.initToDayCheck();
         this.initMonthMax();
         this.initMonthMaxCountries();
         this.getTotalCount();
         this.getMonthNewCount();
         this.getFacilityCountryRatio();
         this.getFacilityTypeRatio();
         this.equipmentMap(true);
         this.getActivatedCount();
         this.timer=setInterval(()=>{
           this.initToDayCheck();
           this.initMonthMax();
           this.initMonthMaxCountries();
           this.getTotalCount();
           this.getMonthNewCount();
           this.getFacilityCountryRatio();
           this.getFacilityTypeRatio();
           this.getActivatedCount();
         },5000)
         this.timer2 = setInterval(()=>{
           this.equipmentMap(false);
         },70000)
       },
      equipmentMap(once){
        equipmentMap(this,{
          areaType:2
        }).then(res=>{
          console.log(res)
          let data = res.data.data||{};
          this.initMap(data,once)
        })
       },
      forMatNumber(val = ''){
         if(val.length<8){
           let bu = 8-val.length;
           for(let i = 0;i<bu;i++){
             val = '0' +val
           }
         }
         return val
      },
      //获取设别总数
      getTotalCount(){
        getTotalCount(this,{
          areaType:2
        }).then(res=>{
          let data = res.data.data
          this.totalCount = data?.totalCount? this.forMatNumber(data?.totalCount.toString()):'00000000';
          this.onlineCount = data?.onlineCount?this.forMatNumber(data?.onlineCount.toString()):'00000000'
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": {
        //     "totalCount": 150000,
        //     "onlineCount": 1200
        //   },
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.totalCount = res.data.totalCount.toString();
        // this.onlineCount = res.data.onlineCount.toString()
      },
       //获取今日在线量检测
       initToDayCheck(){
         getTodayOnlineTrend(this,{
           areaType:2
         }).then(res=>{
           console.log(res)
           let data = res.data.data||{};
           this.drawToDayCheck(data)
         })
         // let res = {
         //   "attachment": null,
         //   "code": 200,
         //   "data": {
         //     "historyHighestCount": 1000,
         //     "monthHighestCount": 400,
         //     "yesterDayHighestCount": 580,
         //     "map": [
         //       {
         //         "xTime": "08:00",
         //         "yCount": 1000,
         //       },
         //       {
         //         "xTime": "09:00",
         //         "yCount": 500,
         //       },
         //       {
         //         "xTime": "10:00",
         //         "yCount": 300,
         //       }
         //     ]
         //   },
         //   "errCode": 200,
         //   "exception": "",
         //   "msg": "成功",
         //   "success": true
         // }
         // this.drawToDayCheck(res.data)
       },
      //画图表今日在线量检测
      drawToDayCheck(data){
        var chart1 = echarts.init(document.getElementById('globaltoDayCheck'))
        if(!data.map || (!data.map.length)){
          return
        }
        let yCount = data.map.map(item=>{
          return item.y
        })
        this.toDayCheckTotal = data.todayDayCount||0;
        let xCount = data.map.map(item=>{
          return item.x
        })
        let more = xCount.length&&xCount[xCount.length-1]?Number(xCount[xCount.length-1].substring(0,2)):''
        if(more<24){
          more = more+1
        }else {
          more=0
        }
        xCount.push(more+':00')
        yCount.push(0)
        let option = {
          grid:{
            top:'8px',
            bottom:"38px"
          },
          xAxis: {
            type: 'category',
            data: xCount,
            boundaryGap: false,
            axisLine:{
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            splitLine:{
              show:false
            },
            axisLabel:{
              formatter: function (value, index){
                if(value>1000){
                  return `${(value/1000)}千`
                }else {
                  return value
                }
              },
            }
          },
          series: [
            {
              name: '数据',
              data: yCount,
              type: 'line',
              // markLine:{
              //   data:[
              //     {
              //       name: '历史最高值',
              //       yAxis: data.historyHighestCount,
              //       lineStyle:{
              //         type:"solid",
              //         color:'#CC8BFF',
              //       },
              //       label:{
              //         formatter: '历史最高\n {c}',
              //         position:'insideEndTop',
              //         fontSize: 8,
              //         color: '#CC8BFF'
              //       }
              //     },
              //     {
              //       name: '本月最高值',
              //       yAxis: data.monthHighestCount,
              //       lineStyle:{
              //         type:"solid",
              //         color:'#1480F0',
              //       },
              //       label:{
              //         formatter: '本月最高\n {c}',
              //         position:'insideEndTop',
              //         fontSize: 8,
              //         color: '#1480F0'
              //       }
              //     },
              //     // {
              //     //   name: '昨日最高值',
              //     //   yAxis: data.yesterDayHighestCount,
              //     //   lineStyle:{
              //     //     type:"solid",
              //     //     color:'#00FFF4',
              //     //   },
              //     //   label:{
              //     //     formatter: '昨日最高\n {c}',
              //     //     position:'insideEndTop',
              //     //     fontSize: 8,
              //     //     color: '#00FFF4'
              //     //   }
              //     // },
              //   ]
              // },
              markPoint: {
                data: [
                  {
                    symbol:'circle',
                    symbolSize:8,
                    type: 'max',
                    name: 'Max' ,
                    itemStyle:{
                      color:'#FDDB65'
                    },
                    label:{
                      formatter: '',
                      backgroundColor:'#FDDB65',
                      padding:6,
                      color:'#000000',
                      width:60,
                      height:23,
                      fontSize:8,
                      borderRadius:5,
                      offset:[0,-20]
                    }
                  },
                ]
              },
              lineStyle :{
                color:'#FFDA4A '
              },
              areaStyle:{
                color:{
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: '#FFDA4A ' // 0% 处的颜色
                  },
                    {
                    offset: 0.7, color: 'rgba(255,218,74,0.5) ' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(255,218,74,0.1)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              smooth:true
            },
          ]
        };

        option && chart1.setOption(option);
      },
      //获取在线量非实时区域数据
       initMonthMax(){
         getOffLineData(this,{
           areaType:2
         }).then(res=>{
           console.log(res)
           let data = res.data.data||{}
           this.offLineData = data||{}
           this.drawMonthMax(data)
         })
         // let res = {
         //   "attachment": null,
         //   "code": 200,
         //   "data": {
         //     "latestDayCount": 420,
         //     "latestMonthCount": 18000,
         //     "dayOfYearHighestCount": 890,
         //     "hisDayHighestCount": 890,
         //     "monthHighestCount": 32000,
         //     "hisMonthHighestCount": 32000,
         //     "map": [
         //       {
         //         "month": 1,
         //         "count": 200
         //       },
         //       {
         //         "month": 2,
         //         "count": 400
         //       }
         //     ]
         //   },
         //   "errCode": 200,
         //   "exception": "",
         //   "msg": "成功",
         //   "success": true
         // };
         // this.offLineData = res.data||{}
         // this.drawMonthMax(res.data)
       },
      //画在线量非实时区域数据
      drawMonthMax(data){
         if(!data.map || !data.map.length){
           return
         }
        let yCount = data.map.map(item=>{
          return item.count
        })
        let xCount = data.map.map(item=>{
          return item.month+'月'
        })
        var chart1 = echarts.init(document.getElementById('globalmonthMax'))
        let option = {
          grid:{
            top:'15px',
            bottom:"25px",
          },
          legend: {
            right:13,
            top:-4,
            textStyle :{
              color:'#05A998',
              fontSize:14,
            }
          },
          xAxis: {
            type: 'category',
            data: xCount,
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
          },
          yAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            splitLine:{
              lineStyle:{
                color:'rgba(255,255,255,.15)'
              }
            },
            axisLabel:{
              formatter: function (value, index){
                if(value>1000){
                  return `${(value/1000)}千`
                }else {
                  return value
                }
              },
            }
          },
          series: [
            {
              name: '本月最高日活',
              data: yCount,
              type: 'bar',
              itemStyle:{
                color:'#63FBFC'
              },
              barMaxWidth:14
            }
          ]
        };

        option && chart1.setOption(option);
      },
      initMonthMaxCountries(){
        getTop5Country(this,{
          areaType:2
        }).then(res=>{
          console.log(res)
          let data = res.data.data ||[]
          this.drawMonthMaxCountries(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "country": "中国",
        //       "count": 1000,
        //     },
        //     {
        //       "country": "日本",
        //       "count": 500,
        //     },
        //     {
        //       "country": "韩国",
        //       "count": 300,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.drawMonthMaxCountries(res.data)

      },
      drawMonthMaxCountries(data){
        var chart1 = echarts.init(document.getElementById('globalmonthMaxCountries'))
        let xCount = data.map((item,index)=>{
          let colors = ['#E7B600','#00B2E2','#48C0C5','#8077EA','#0079EA']
          return {
            value:item.count,
            itemStyle: {
              color: colors[index]
            }
          }
        })
        let yCount = data.map(item=>{
          return item.country
        })
        let option = {
          grid:{
            top:'15px',
            bottom:'26px',
          },
          xAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            splitLine:{
              lineStyle:{
                color:'rgba(255,255,255,.15)'
              }
            }
          },
          yAxis: {
            type: 'category',
            data:yCount,
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            axisLabel:{
                show:true,
                textStyle:{
                  fontSize:14,
                },
              }
          },
          series: [
            {
              name: '上月活跃TOP5国家',
              data: xCount,
              type: 'bar',
              itemStyle:{
                color:'#63FBFC'
              },
              barMaxWidth:14,
              label: {
                show: true,
                position: 'right',
                color:'#ffffff',
                formatter: '{c}台',
              },
            }
          ]
        };

        option && chart1.setOption(option);
      },
      // 每月新增月活
      getMonthNewCount(){
        getMonthNewCount(this,{
          areaType:2
        }).then(res=>{
          console.log(res)
          let data = res.data.data ||[]
          this.drawMonthNewCount(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "month": "1",
        //       "count": 200,
        //     },
        //     {
        //       "month": "2",
        //       "count": 300,
        //     },
        //     {
        //       "month": "3",
        //       "count": 100,
        //     },
        //     {
        //       "month": "4",
        //       "count": 150,
        //     },
        //     {
        //       "month": "5",
        //       "count": 180,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.drawMonthNewCount(res.data)
      },
      drawMonthNewCount(data){
        let yCount = data.map((item,index)=>{
          let obj = {};
          if(index===1){
            obj = {
              value:item.count,
              label: {
                show: true,
                position: 'top',
                color:'#FEDB65'
              },
            }
          }else {
            obj = {
              value:item.count,
            }

          }
          return obj
        })
        let xCount = data.map(item=>{
          return item.month+'月'
        })
        var chart1 = echarts.init(document.getElementById('globalmonthNewCount'))
        let option = {
          grid:{
            top:'15px',
            bottom:"28px"
          },
          xAxis: {
            type: 'category',
            data: xCount,
            boundaryGap: false,
            axisLine:{
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine:{
              show:true,
              lineStyle:{
                color:'rgba(255,255,255,.45)'
              }
            },
            splitLine:{
              lineStyle:{
                color:'rgba(255,255,255,.15)'
              }
            },
            axisLabel:{
              formatter: function (value, index){
                if(value>1000){
                  return `${(value/1000)}千`
                }else {
                  return value
                }
              },
            }
          },
          series: [
            {
              data: yCount,
              type: 'line',
              lineStyle :{
                color:'#FFDA4A '
              },
              smooth:true,
              itemStyle:{
                color:'#FEDB65'
              },

            }
          ]
        };

        option && chart1.setOption(option);
      },
      //获取设备分布
      getFacilityCountryRatio(){
        getFacilityCountryRatio(this,{
          areaType:2
        }).then(res=>{
          let data = res.data.data ||[];
          this.facilityCountryRatioList = data.map((item,index)=>{
            let obj = {
              ...item,
              img:this.ratioList[index]
            }
            return obj
          })
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "country": "中国",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "country": "日本",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "country": "韩国",
        //       "ratio": 39,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.facilityCountryRatioList = res.data.map((item,index)=>{
        //   let obj = {
        //     ...item,
        //     img:this.ratioList[index+1]
        //   }
        //   return obj
        // })

      },
      //型号分布
      getFacilityTypeRatio(){
        getFacilityTypeRatio(this,{
          areaType:2
        }).then(res=>{
          let data = res.data.data||[];
          this.drawFacilityTypeRatio(data)
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": [
        //     {
        //       "type": "mifi-v1",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "type": "mifi-v2",
        //       "ratio": 30.5,
        //     },
        //     {
        //       "type": "mifi-v3",
        //       "ratio": 39,
        //     }
        //   ],
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.drawFacilityTypeRatio(res.data)
      },
      drawFacilityTypeRatio(data){
         let pieData = data.map((item,index)=>{
           return {
             value:item.ratio,
             name:item.type,
             itemStyle:''
           }
         })
        var chart1 = echarts.init(document.getElementById('globalfacilityTypeRatio'))
        let option = {
          legend: {
            orient: 'vertical',
            left: 'right',
            textStyle:{
              color:'#fff'
              }
            },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['20%', '60%'],
              label: {
                alignTo: 'edge',
                formatter: '{d}%',
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 15,
                fontSize: 14,
                rich: {
                  time: {
                    fontSize: 10,
                    color: '#999'
                  }
                }
              },
              // labelLine: {
              //   show: true
              // },
              labelLine: {
                length: 10,
                length2: 5,
                maxSurfaceAngle: 80
              },
              data: pieData,
              itemStyle:{
                borderWidth:1,
                borderColor:'#ffffff',
                color:function (parmas,index) {
                   console.log(parmas)
                   console.log(index)
                   let colorList = ['#C87DEE','#4979CB','#50AE89','#EF8E54','#8252DB']
                  return colorList[parmas.dataIndex||0]
                }
              },
            }
          ]
        }
        option && chart1.setOption(option);
      },
      // initMap(){
      //   var chart1 = echarts.init(document.getElementById('map'))
      //   var geoCoordMap = {
      //     '福州': [119.4543, 25.9222],
      //     '长春': [125.8154, 44.2584],
      //     '重庆': [107.7539, 30.1904],
      //     '西安': [109.1162, 34.2004],
      //     '成都': [103.9526, 30.7617],
      //     '常州': [119.4543, 31.5582],
      //     '北京': [116.4551, 40.2539],
      //     '北海': [109.314, 21.6211],
      //     '海口': [110.3893, 19.8516],
      //     '长沙': [113.019455,28.200103],
      //     '上海': [121.40, 31.73],
      //     '内蒙古': [106.82, 39.67]
      //   };
      //
      //   var GZData = [
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '福州',
      //       value: 95
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '长春',
      //       value: 80
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '重庆',
      //       value: 70
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '西安',
      //       value: 60
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '成都',
      //       value: 50
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '常州',
      //       value: 40
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '北京',
      //       value: 30
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '北海',
      //       value: 20
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '海口',
      //       value: 10
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '上海',
      //       value: 80
      //     }],
      //     [{
      //       name: '长沙'
      //     }, {
      //       name: '内蒙古',
      //       value: 80
      //     }]
      //   ];
      //
      //   var convertData = function (data) {
      //     var res = [];
      //     for (var i = 0; i < data.length; i++) {
      //       var dataItem = data[i];
      //       var fromCoord = geoCoordMap[dataItem[0].name];
      //       var toCoord = geoCoordMap[dataItem[1].name];
      //       if (fromCoord && toCoord) {
      //         res.push({
      //           fromName: dataItem[0].name,
      //           toName: dataItem[1].name,
      //           coords: [fromCoord, toCoord]
      //         });
      //       }
      //     }
      //     return res;
      //   };
      //
      //   var color = ['#c5f80e'];
      //   var series = [];
      //   [
      //     ['石家庄', GZData]
      //   ].forEach(function (item, i) {
      //     series.push({
      //       name: item[0],
      //       type: 'lines',
      //       zlevel: 2,
      //       symbol: ['none', 'arrow'],
      //       symbolSize: 10,
      //       effect: {
      //         show: true,
      //         period: 6,
      //         trailLength: 0,
      //         symbol: 'arrow',
      //         symbolSize: 5
      //       },
      //       lineStyle: {
      //         normal: {
      //           color: color[i],
      //           width: 1,
      //           opacity: 0.6,
      //           curveness: 0.2
      //         }
      //       },
      //       data: convertData(item[1])
      //     }, {
      //       name: item[0],
      //       type: 'effectScatter',
      //       coordinateSystem: 'geo',
      //       zlevel: 2,
      //       rippleEffect: {
      //         brushType: 'stroke'
      //       },
      //       label: {
      //         normal: {
      //           show: true,
      //           position: 'right',
      //           formatter: '{b}'
      //         }
      //       },
      //       symbolSize: function (val) {
      //         return val[2] / 8;
      //       },
      //       itemStyle: {
      //         normal: {
      //           color: color[i]
      //         }
      //       },
      //       data: item[1].map(function (dataItem) {
      //         return {
      //           name: dataItem[1].name,
      //           value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
      //         };
      //       })
      //     });
      //   });
      //   let option = {
      //     tooltip: {
      //       show: false
      //     },
      //     geo: {
      //       map: 'china',
      //       label: {
      //         emphasis: {
      //           show: false
      //         }
      //       },
      //       roam: true,
      //       itemStyle: {
      //         normal: {
      //           borderColor: 'rgba(147, 235, 248, 1)',
      //           borderWidth: 1,
      //           areaColor: {
      //             type: 'radial',
      //             x: 0.5,
      //             y: 0.5,
      //             r: 0.8,
      //             colorStops: [{
      //               offset: 0,
      //               color: 'rgba(175,238,238, 0)' // 0% 处的颜色
      //             }, {
      //               offset: 1,
      //               color: 'rgba(47,79,79, .1)' // 100% 处的颜色
      //             }],
      //             globalCoord: false // 缺省为 false
      //           },
      //           shadowColor: 'rgba(128, 217, 248, 1)',
      //           // shadowColor: 'rgba(255, 255, 255, 1)',
      //           shadowOffsetX: -2,
      //           shadowOffsetY: 2,
      //           shadowBlur: 10
      //         },
      //         emphasis: {
      //           areaColor: '#389BB7',
      //           borderWidth: 0
      //         }
      //       }
      //     },
      //     series: series
      //   };
      //   option && chart1.setOption(option);
      // }
      //获取今日激活数检测
      getActivatedCount(){
        getActivatedCount(this,{
          areaType:2
        }).then(res=>{
          let data = res.data.data ||{}
          this.activatedCount = data;
        })
        // let res = {
        //   "attachment": null,
        //   "code": 200,
        //   "data": {
        //     "todayCount": 420,
        //     "yesterdayCount": 650,
        //     "monthCount": 180000,
        //     "historyCount": 1020
        //   },
        //   "errCode": 200,
        //   "exception": "",
        //   "msg": "成功",
        //   "success": true
        // }
        // this.activatedCount = res.data;
      },
      format(e,type){
         console.log(type)
        return this.activatedCount.yesterdayCount
      },
      format2(e,type){
        console.log(type)
        return this.activatedCount.monthCount
      },
      format3(e,type){
        console.log(type)
        return this.activatedCount.historyCount
      },
      format4(e,type){
        console.log(type)
        return this.activatedCount.yearHistoryCount
      },
      //计算占比
      mathPricent(key){
        let count = this.activatedCount[key]? this.activatedCount[key] : 0;
        let total = this.activatedCount.todayCount + this.activatedCount.monthCount + this.activatedCount.historyCount + this.activatedCount.yearHistoryCount;
        return Number((count/total).toFixed(2))*100
      },
      disposeEcharts(){
         let list = ['mapGlobal','globaltoDayCheck','globalmonthMax','globalmonthMaxCountries','globalmonthNewCount','globalfacilityTypeRatio','canvas']
         list.forEach(item=>{
           if(document.getElementById(item)){
             var chart1 = echarts.init(document.getElementById(item))
             chart1.clear()
             chart1.dispose()
             chart1 = null
           }
         })
      },
    },
    beforeDestroy() {
      // this.clearMap()
      window.clearInterval(this.timer)
      window.clearInterval(this.timer2)
      this.disposeEcharts()
    },
    destroyed() {

    }
  }
</script>
<style scoped src="./index.css">

</style>
